<template>
	<view class="user-play-list-container">
		<view class="play-list">
			<navigator :url="'/pages/playlist/mylist?id='+item.id" class="play-list-item" v-for="item in playList" :key="item.id">
				<image :src="item.coverImgUrl" :lazy-load="true" mode="widthFix"></image>
				<view class="right-info">
					<text class="name">{{item.name}}</text>
					<text class="time">{{item.createTime | dateFormat}}</text>
					<text class="count">{{item.trackCount}}首</text>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default{
		props:{
			userId:{
				type:[Number,String]
			}
		},
		data(){
			return{
				playList:null
			}
		},
		created() {
			this.getUserPlayList()
		},
		computed:{
			...mapState(['themeType','cookie'])
		},
		methods:{
			getUserPlayList(){
				this.request({
				    url:"/user/playlist?uid="+this.userId+"&cookie="+this.cookie
				}).then(res=>{
					this.playList=res.playlist.map(val=>{
						return {
							id:val.id,
							name:val.name,
							trackCount:val.trackCount,
							createTime:val.createTime,
							coverImgUrl:val.coverImgUrl
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-play-list-container{
		.play-list{
			.play-list-item{
				margin: 20rpx 0;
				display: flex;
				border-radius: 20rpx;
				overflow: hidden;
				image{
					width: 200rpx;
					height: 200rpx;
				}
				.right-info{
					padding: 0 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.name{
						color: #fff;
						font-size: 32rpx;
					}
					.count,.time{
						font-size: 24rpx;
						color: #ccc;
					}
				}
			} 
		}
	}
</style>
